<template xmlns:background-color="http://www.w3.org/1999/xhtml">
    <div>
        <div class="deviceCard" @click="selected(item)">
                <a-row>
                    <a-col>
                        <div style="height:20px;">
                        <div class="deviceStatus">
                          <span v-if="checkIsValid(item.baseinfo) && item.baseinfo.isOnline == 1">
                            <i class="action-jeecg actiondeviceon statusLight on" />
                          </span>
                          <span v-if="checkIsValid(item.baseinfo) && item.baseinfo.isOnline == 0">
                            <i class="action-jeecg actiondeviceoff statusLight off" />
                          </span>
                        </div>
                        <div class="deviceName">
                            <span>【{{ checkIsValid(item.baseinfo)?item.baseinfo.name:"NaN" }}】</span>&nbsp;<span style="font-size: 8px;">{{ checkIsValid(item.cmdTime)?getTime(item.cmdTime):"" }}</span>
                          </div>
                        </div>
                    </a-col>
                </a-row>
                    <a-row>
                      <a-col :span="9">
                        <div>
                          <div style="color: green;font-size: 12px;">{{ checkIsValid(item.baseinfo)?item.baseinfo.mainVol:0 }}V / {{ checkIsValid(item.baseinfo)?item.baseinfo.backVol:0 }}V</div>
                          <div style="color: green;font-size: 12px;">{{ checkIsValid(item.baseinfo)?item.baseinfo.supplyCurrent:0 }}A</div>
                          <div class="alarmStatus">
                            <span class="nav-icon-normal on err" v-if="isMainVolErrCall(item)">主</span>
                            <span class="nav-icon-normal on err"  v-if="isBackVolErrCall(item)">备</span>
                            <span class="nav-icon-normal on err"   v-if="isTempErrCall(item)">温</span>
                            <span class="nav-icon-normal on err"   v-if="isUPSErrCall(item)">U</span>
                            <span class="nav-icon-normal on err"   v-if="isSupplyCurrentErrCall(item)">流</span>
                          </div>

                        </div>
                      </a-col>
                      <a-col :span="15">
                        <div v-if="checkIsValid(item.switches)" class="channelStatus">
                          <template  v-for="(channel, index2) of item.switches.switches">

                            <span v-bind:key="index2 + '_#br'" v-if="index2 > 0 && index2 % 8 == 0"><br /></span>

                            
                            <span v-bind:key="index2 + '_#device_err'" v-if="channel.iswarning == 1"
                              class="deviceSwitchLight err"><i class="action-jeecg actiononline" /></span>

                            <span v-bind:key="index2 + '_#device_off'" v-else-if="channel.current <= 0"
                              class="deviceSwitchLight off"><i class="action-jeecg actiononline" /></span>
                            
                            <span v-bind:key="index2 + '_#device_on'" v-else-if="channel.current > 0"
                              class="deviceSwitchLight on"><i class="action-jeecg actiononline" /></span>
                          </template>
                        </div>
                      </a-col>
                    </a-row>

                  </div>
    </div>
  </template>

<script>
// import { getDeviceinfoList } from '@/api/deviceApi'
import { isMainVolErr ,isBackVolErr,isTempErr, isUPSErr,isSupplyCurrentErr} from '@/utils/deviceReader.js'
import { isNull, isUndefined } from 'lodash'
import { formatDate } from '@/utils/util'

export default {
    name: 'DeviceBoxSimple',
    props: {
      deviceObj: {
        required: true,
        type: Object,
        default: null,
      },
    },
    components: {
      
  
    },
    computed: {
  
    },
    data() {
      return {
        data: [],
        params: {},
        loading: false,
        item : this.deviceObj, 
        selectedId : 0,
      }
    },
    created() {
    //   this.loadData()
        // console.log(this.deviceObj);
    },
    watch:{
        deviceObj : {
            handler(oldVal, newVal){
                if(!isUndefined(newVal) && !isNull(newVal)){
                    if(isUndefined(newVal.switches)){
                        newVal.switches = {switches:[]};
                    }
                    this.item = newVal;
                }
            },
            // immediate:true,
            deep:true
        },
    },
    methods: {

      selected(item) {
        this.$emit('showDetail',item);
      },
      getTime(timestmp){
        return formatDate(timestmp, 'yyyy-MM-dd hh:mm:ss')
      },
      isMainVolErrCall(item){
        return isMainVolErr(item);
      },
      isBackVolErrCall(item){
        return isBackVolErr(item);
      },
      isTempErrCall(item){
        return isTempErr(item);
      },
      isUPSErrCall(item){
        return isUPSErr(item);
      },
      isSupplyCurrentErrCall(item){
        return isSupplyCurrentErr(item);
      },
      checkIsValid(val){
        return !isUndefined(val) && !isNull(val);
      }
    },
  }
  </script>
  
  <style>
  .deviceItem:hover {
    background-color: #8cc8ff;
    cursor: pointer;
  }
  
  
  .deviceCard {
    background-color: #fff;
    font-size: 18px;
    line-height: 18px;
    display: block;
    height: 110px;
    width: 95%;
    padding: 10px 5px;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
  }
  
  .alarmStatus {
    padding-left: 5px;
    margin-top: 5px;
  }
  
  .channelStatus {}
  
  .deviceStatus{
    position:absolute;
    left :5px;
  }

  .deviceName {
    position:absolute;
    right :5px;
    font-size: 14px;
    font-weight: 600;
  }
  
  .on {
    color: #3ff711 !important;
  }
  
  .off {
    color: #b3b4c5 !important;
  }
  
  .err {
    color: red !important;
  }
  
  .statusLight {
    font-size: 38px;
    font-weight: 500;
  }
  
  /*图标样式*/
  .nav-icon-normal {
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    border-radius: 2px;
    border-color: #b3b4c5;
    border: 1px solid;
    /* background-color: #b3b4c5; */
    vertical-align: middle;
    overflow: hidden;
    font-size: 8px;
    /* text-indent: 8px; */
    text-align: center;
    /* letter-spacing: 8px; */
    color: #b3b4c5;
    word-break: break-all;
    margin-right: 3px;
  }
  
  .deviceSwitchLight {
    vertical-align: auto;
  }
  </style>